<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    // 静态方法。是给构造函数用的
    // Promise.all()
    // 让多个promise实例一起完成

    // Promise.all()接受一个由promise实例组成的数组
    // all方法可以使用.then
    // .then里面的结果就是这几个promise对象，成功的结果组成的数组
    // .then的执行时机是等待这几个promise对象全都成功了之后

    // 如果这几个promise对象只要有一个变成了以失败
    // 那么就不会走then，会走catch
    // catch的结果是第一个错误的结果


    function require(url) {
      return new Promise((resolve) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url);
        xhr.send();
        xhr.onload = function() {
          if (xhr.status === 200) {
            // console.log(JSON.parse(xhr.responseText)); // 数据一
            resolve(JSON.parse(xhr.responseText))
          } else {
            console.error('请求失败', xhr.status);
          }
        };
      })
    }

    function delay(ms) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          resolve(1234)
          // reject(5678)
        }, ms)
      })
    }


    // 下面这种写法是表示同时去获取接口数据
    // 但是呢不能保证请求是一起完成的
    // 调第一个接口
    // require('https://cnodejs.org/api/v1/topics').then((res) => {
    //   console.log(res);
    // })
    // 调第二个接口
    // require('https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8').then((res) => {
    //   console.log(res);
    // })


    const p1 = require('https://cnodejs.org/api/v1/topics');
    const p2 = require('https://cnodejs.org/api/v1/topic/61f69e4aa08b39f75309c2a8');
    const p3 = delay(3000);


    Promise.all([p1, p2, p3]).then(res => {
      console.log(res);
    }).catch(err => {
      console.log(err);
    })


    const all = (arr) => {
      // 先判断传进来的是不是一个数组

      return new Promise((resolve, reject) => {
        // resolve()  或者 reject()

        // let newArr = [];
        let newArr = new Array(arr.length);
        let count = 0;
        arr.forEach((item, index) => {
          item.then((res) => {
            // newArr.push(res);
            // if (newArr.length === arr.length) {
            //   resolve(newArr)
            // }

            newArr[index] = res;
            count++;

            if (count === arr.length) {
              resolve(newArr)
            }


          }).catch(err => {
            reject(err)
          })
        });
      })
    }
    all([p1, p2, p3]).then(res => {
      console.log(res); // [p1result, p2result, p3result]
    }).catch(err => {
      console.log(err);
    })



    // console.log(new Array(3));
    
  </script>
</body>
</html>